import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, Link, browserHistory} from 'react-router';

import './MyAuction.scss';

class MyAuction extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
        items_ing:[],
        items_ed:[]
    };
    this.loadAucitoningData = this.loadAucitoningData.bind(this);
  }

  loadAucitoningData(){
      $.get(CBH.apiRoot + "/?g=Api&m=MyAuction&a=auctioningList&p=1", function(result) {
          if(result.status){
              this.setState({items_ing:result.data});
          }
      }.bind(this), 'jsonp');
  }

  loadAucitonedData(){
      $.get(CBH.apiRoot + "/?g=Api&m=MyAuction&a=auctionedList&p=1", function(result) {
          if(result.status){
              this.setState({items_ed:result.data});
          }
      }.bind(this), 'jsonp');
  }

  componentDidMount() {
    // tabbed content
   let that = this;
   $(".tab_content").hide();
   $(".tab_content:first").show();

   /* if in tab mode */
     $("ul.tabs li").click(function() {

       $(".tab_content").hide();
       var activeTab = $(this).attr("rel");
       $("#"+activeTab).fadeIn();

       $("ul.tabs li").removeClass("active");
       $(this).addClass("active");

     $(".tab_drawer_heading").removeClass("d_active");
     $(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active");
        if(activeTab == 'tab1'){
            that.loadAucitoningData();
        } else {
            that.loadAucitonedData();
        }
     });
   /* if in drawer mode */
   $(".tab_drawer_heading").click(function() {

       $(".tab_content").hide();
       var d_activeTab = $(this).attr("rel");
       $("#"+d_activeTab).fadeIn();

     $(".tab_drawer_heading").removeClass("d_active");
       $(this).addClass("d_active");

     $("ul.tabs li").removeClass("active");
     $("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active");
     });


   /* Extra class "tab_last"
      to add border to right side
      of last tab */
   $('ul.tabs li').last().addClass("tab_last");
   $("ul.tabs li:first").click();
  }

  render() {

    const auctioning = this.state.items_ing.map((p)=>{
        let call_time = new Date();
        call_time.setTime(p.call_time*1000);
        let auctionStatus = p.uid==p.called_uid?'出价领先':<span style={{color:'#555'}}>已出局</span>;
        return (<div className="media">
                  <div className="media-left">
                    <Link to={`/detail/${p.id}`}>
                      <img className="media-object" src={p.thumb_url ? CBH.imgUploadPath +'/data/upload/'+ p.thumb_url : ''} alt="..." />
                    </Link>
                  </div>
                  <div className="media-body">
                    <h4 className="media-heading">{p.title}</h4>
                    <p>当前价 : <span>{p.current_price}元</span></p>
                    <p>更新 : <span>{`${call_time.getMonth()+1}月${call_time.getDate()}日 ${call_time.getHours()}:${call_time.getMinutes()}`}</span></p>
                    <p>冻结保证金 : <span>{p.bond}</span></p>
                    <p>冻结保证金于拍卖结束自动退还</p>

                  </div>

                  <div className="hrfl"></div>

                  <div className="status-line">
                    <p>正在竞价</p>
                    <p>{auctionStatus}</p>
                    <p><Link to={`/detail/${p.id}`}>点击进入出价界面</Link></p>
                  </div>
                </div>
              )
      });
    const auctioned =this.state.items_ed.map((p)=>{
      let end_time = new Date();
      end_time.setTime(p.ctime*1000);
      let winnerStatus = p.uid==p.winner_uid&&p.auction_status==3?'恭喜，您已拍中心仪拍品！':<span style={{color:'#555'}}>抱歉，您未拍中！</span>;
      return (<div className="media">
                <div className="media-left">
                  <Link to={`/detail/${p.id}`}>
                    <img className="media-object" src={p.thumb_url ? CBH.imgUploadPath +'/data/upload/'+ p.thumb_url : ''} alt={p.title} />
                  </Link>
                </div>
                <div className="media-body">
                  <h4 className="media-heading">{p.title}</h4>
                  <p>{p.auction_status==3?'拍中价':'最高出价'} : <span>{p.price}元</span></p>
                  <p>结束时间 : <span>{`${end_time.getMonth()+1}月${end_time.getDate()}日 ${end_time.getHours()}:${end_time.getMinutes()}`}</span></p>
                  <p>冻结保证金 : <span>{p.bond}</span></p>
                  <p>冻结保证金于拍卖结束自动退还</p>
                </div>

                <div className="hrfl"></div>

                <div className="status-line">
                  <p>{p.auction_status==3?'已拍中':'流拍'}</p>
                  <p>{winnerStatus}</p>                
                </div>
              </div>
            )
    });
    return (

      <div className="MyAuction">
        <ul className="tabs">
          <li className="active" rel="tab1">进行中的拍卖</li>
          <li rel="tab2">往期拍卖</li>
        </ul>

        <div className="tab_container">
          <div id="tab1" className="tab_content">
              {auctioning}
          </div>

          <div id="tab2" className="tab_content">
              {auctioned}
          </div>
        </div>
      </div>


    );
  }

}

export default MyAuction;
